@charset "UTF-8";  /*声明 CSS 文件编码格式的语句*/
body {
    display: flex;/ 弹性布局 /
    font-family: "Open Sans", sans-serif;
    height: 100vh;
    background-size: cover;
    overflow: hidden;
    background-color:#2681d1;
    background-image:
            radial-gradient(closest-side, rgba(41, 217, 182, 1), rgba(41, 217, 182, 0)),
            radial-gradient(closest-side, rgba(41, 215, 217, 1), rgba(41, 215, 217, 0)),
            radial-gradient(closest-side, rgba(41, 195, 217, 1), rgba(41, 195, 217, 0)),
            radial-gradient(closest-side, rgba(38, 117, 209, 1), rgba(38, 117, 209, 0)),
            radial-gradient(closest-side, rgba(38, 95, 209, 1), rgba(38, 95, 209, 0));
    background-size:
            130vmax 130vmax,
            80vmax 80vmax,
            90vmax 90vmax,
            110vmax 110vmax,
            90vmax 90vmax;
    background-position:
            -80vmax -80vmax,
            60vmax -30vmax,
            10vmax 10vmax,
            -30vmax -10vmax,
            50vmax 50vmax;
    background-repeat: no-repeat;
    animation: 7s movement linear infinite;
}
/*"body::after" 用于创建一个虚拟元素，以覆盖整个页面，并用渐变效果来改变背景颜色。 */
body::after {
    content: '';
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);/* 实现高斯模糊效果 */
}

@keyframes movement {
    0%, 100% {
        background-size:
                130vmax 130vmax,
                80vmax 80vmax,
                90vmax 90vmax,
                110vmax 110vmax,
                90vmax 90vmax;
        background-position:
                -80vmax -80vmax,
                60vmax -30vmax,
                10vmax 10vmax,
                -30vmax -10vmax,
                50vmax 50vmax;
    }
    25% {
        background-size:
                100vmax 100vmax,
                90vmax 90vmax,
                100vmax 100vmax,
                90vmax 90vmax,
                60vmax 60vmax;
        background-position:
                -60vmax -90vmax,
                50vmax -40vmax,
                0vmax -20vmax,
                -40vmax -20vmax,
                40vmax 60vmax;
    }
    50% {
        background-size:
                80vmax 80vmax,
                110vmax 110vmax,
                80vmax 80vmax,
                60vmax 60vmax,
                80vmax 80vmax;
        background-position:
                -50vmax -70vmax,
                40vmax -30vmax,
                10vmax 0vmax,
                20vmax 10vmax,
                30vmax 70vmax;
    }
    75% {
        background-size:
                90vmax 90vmax,
                90vmax 90vmax,
                100vmax 100vmax,
                90vmax 90vmax,
                70vmax 70vmax;
        background-position:
                -50vmax -40vmax,
                50vmax -30vmax,
                20vmax 0vmax,
                -10vmax 10vmax,
                40vmax 60vmax;
    }
}

/* 设置的边框和内边距的值是包含在 width 内的， width 和 height 属性包括内容，内边距和边框，但不包括外边距 */
* {
    box-sizing: border-box;
}

header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    z-index:10;
    position: fixed;
    /*不会受到页面滚动的影响 *将位置设为"fixed"可使元素相对于视窗进行定位*!*/
    top: 2.5vh;
    left: 2vw;
    width: 100%;
    height: 10vh;
    /*vh表示视口高度的百分比，因此100vh将使元素的高度等于浏览器窗口高度（视口）*/
    background: rgba(255, 255, 255, 0);
}

header img {
    flex-shrink: 0;
    /*防止项目在空间不足时缩小*/
    width: 20%;
    /*将图像宽度设置为其父元素（<header>）宽度的20％*/
    /*vw表示相对于视口宽度的百分比，即1vw等于视口宽度的1%.*/
    /*%表示相对于父元素的百分比，即1%等于父元素宽度的1%。*/
}

header .logo h6 {
    flex-shrink: 0;
    /*防止项目在空间不足时缩小*/
    font-size: 1.2vw;
    line-height: 4vh;
    text-align: center;
    margin-left: 1vw;
    margin-right: 1vw;
    background-color: rgba(255, 255, 255, 0);
    color: rgb(255, 255, 255);
}

header .line {
    flex-shrink: 0;
    /*防止项目在空间不足时缩小*/
    width: 0.08vw;
    height: 6vh;
    margin-left: 1vw;
    margin-right: 1vw;
    background-color: #ffffff;
}

header .brand {
    flex-shrink: 0;
    /*防止项目在空间不足时缩小*/
    font-size: 3.8vh;
    letter-spacing: 0.5vw;
    /*用于控制字符间的空白间隔*/
    line-height: 8vh;
    color: #ffffff;
}

header .time {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    /*加粗*/
    flex-shrink: 0;
    /*防止项目在空间不足时缩小*/
    font-size: 1.3vw;
    text-align: center;
    margin-left: 2.5vw;
    background-color: rgba(255, 255, 255, 0);
    color: rgb(255, 255, 255);
}

.main{
    display: flex;
    /*弹性布局或 Flexbox 布局。它提供了一种灵活的方式来控制容器中子元素的位置、大小和排列方式。通过 flex-direction 属性可以改变主轴的方向（默认是水平方向）*/
    /*main占据全屏宽度*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.wrapper {
    flex-basis: 35%;
    /*元素在主轴方向上占据父容器的 35% 的空间。*/
    flex-shrink: 0;
    /*该值表示元素不会缩小，即使有剩余的空间，也不会让其他元素进行缩放。如果将该值设置为默认值 1，则表示元素将根据需要收缩。*/
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    min-height: 100%;
    padding: 5vw 0.8vw;
    /* background: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%); */
}

.login {
    border-radius: 8px 8px 8px 8px;
    width: 92%;
    height: 62%;
    max-width: 335px;
    /*最大宽度*/
    background: #ffffff;
    position: relative;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
    z-index:10;
    padding: 0 20px;
}

.login .title {
    color: #444;
    font-size: 1.2em;
    font-weight: bold;
    margin: 20px 0 20px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.login input {
    font-size: 1em;
    display: block;
    padding: 15px 10px;
    margin-bottom: 10px;
    width: 100%;
    border: 1px solid #ddd;
    transition: border-width 0.2s ease;/ 给边框添加渐变效果交互，边框变化时间为0.2秒，运动方式为缓和模式 /
border-radius: 2px;
    color: #ccc;
}

.login input + i.fa {
    color: #fff;
    font-size: 1em;
    position: absolute;
    margin-top: -47px;
    opacity: 0;
    left: 0;
    transition: all 0.1s ease-in;
}
.login input:focus {
    outline: none;
    color: #444;
    border-color: #2196F3;
    border-left-width: 35px;
}

/*".login input:focus + i.fa" 是一个 CSS 选择器，其作用是选择当输入框获得焦点时，其相邻的同级兄弟元素 "<i>" 并且其 class 属性中包含 "fa" 的元素。*/
.login input[type="text"]:focus + i.fa {
    opacity: 1;
    position: relative;
    /*以文本框相对定位的方式*/
    left: 10px;
    top: 6px;
    transition: all 0.25s ease-out;
}

.login input[type="password"]:focus + i.fa {
    opacity: 1;
    position: relative;
    /*以文本框相对定位的方式*/
    left: 10px;
    top: 6px;
    transition: all 0.25s ease-out;
}

.login a {
    font-size: 0.8em;
    color: #2196F3;
    text-decoration: none;
}
.login select {
    font-size: 1em;
    display: block;
    padding: 15px 10px;
    margin-bottom: 10px;
    width: 100%;
    border: 1px solid #ddd;
    transition: border-width 0.2s ease;
    border-radius: 2px;
    color: #ccc;
}
.login select + i.fa {
    color: #fff;
    font-size: 1em;
    position: absolute;
    margin-top: -47px;
    opacity: 0;
    left: 0;
    transition: all 0.1s ease-in;
}
.login select:focus {
    outline: none;
    color: #444;
    border-color: #2196F3;
    border-left-width: 35px;
}
.login select:focus + i.fa {
    opacity: 1;
    position: relative;
    /*以文本框相对定位的方式*/
    left: 8px;
    top: 6px;
    transition: all 0.25s ease-out;
}

.login button {
    width: 100%;
    height: 100%;
    padding: 10px 10px;
    background: #2196F3;
    color: #fff;
    display: block;
    border: none;
    margin-top: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
    max-height: 60px;
    border: 0px solid rgba(0, 0, 0, 0.1);
    border-radius: 0 0 2px 2px;
    transform: rotateZ(0deg);
    /*在 "rotateZ" 函数中传递参数 "0deg" 意味着该元素不会被旋转。它本质上是重置应用于该元素的任何之前的旋转，并恢复其原始方向。*/
    transition: all 0.1s ease-out;
    border-bottom-width: 7px;
}

.login button:hover, .login button:focus {
    /* 悬浮和聚焦状态下的共同样式 */
    background-color: #1283d5;
    transition: background-color 0.4s ease-out;
    cursor: pointer;
}

.login button .spinner {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    border: 4px solid #ffffff;
    border-top-color: rgba(255, 255, 255, 0.3);
    border-radius: 100%;
    left: 50%;
    top: 0;
    opacity: 0;
    margin-left: -20px;
    margin-top: -20px;
    animation: spinner 0.6s infinite linear;
    transition: top 0.3s 0.3s ease, opacity 0.3s 0.3s ease, border-radius 0.3s ease;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
}

@keyframes spinner {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(359deg);
    }
}

.state{
    font-size: 1.5em;
}

footer {
    position: fixed;
    bottom: 12vh;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index:10;
    text-align: center;
    color: #ddd;
    font-weight: normal;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    font-size: 1em;
}
footer a, footer a:link {
    color: #fff;
    text-decoration: none;
}


/* 左侧轮播图样式 */
.left {
    flex-basis: 65%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    min-height: 100%;
    padding: 5vw 0.5vw 5vw 4vw;
    z-index: 10;
}

.left .left_container {
    border-radius: 8px 8px 8px 8px;
    width: 80%;
    height: 62%;
    background: #ffffff;
    position: relative;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
}

.left .left_container .carousel img{
    border-radius: 8px 8px 8px 8px;
    width: 100%;
    height: 100%;
}
#left,#right{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 90px;
    background-color: lightsteelblue;
    font-size: 18px;
    border-radius: 50%;
    text-align: center;
    line-height: 100%;
    cursor: pointer;
    color: lightslategray;
}
#left{
    left: 0;
}
#right{
    right: 0;
}

.loading button, .loading button:hover, .loading button:focus {
    background: rgb(33, 150, 243);
    border-radius: 8px 8px 8px 8px;
    max-height: 870px;
    height: 100%;
    padding-top: 50px;
}
.loading button .spinner {
    opacity: 1;
    top: 40%;
}
.ok button,.ok button:hover, .ok button:focus {
    background-color: #8bc34a;
}
.ok button .spinner {
    border-radius: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    height: 20px;
    animation: none;
    transform: rotateZ(-45deg);
}